<template>
    <div class="help">
        <v-scroll :on-infinite="infinite"  :on-refresh = "refresh" ref="my_scroller" :dataList="scrollData" v-if="$route.query.status === 'dynamic'" id="helpId">
            <div class="lesson_lists">
                <group>
                    <cell class="list" v-for="(item,index) of helps" :key="index" :title="item.objector" :inline-desc="item.content_feedback" :link="{name: 'HelpDetail', params: {helpid: item.id}}" v-if="item.objector"></cell>
                </group>
            </div>
        </v-scroll>
        <div class="branch_lists" v-if="$route.query.status === 'statistics'">
          <group>
              <cell :title="item.department"  v-for="(item,index) of branchs" :key="index" :link="{name: 'BranchHelp', params: {branchid: item.department_id}}">
                  <img slot="icon" src="./zbfc_zbtb.png" alt="" class="weui-cell_icon">
                  <p><span>{{item.num}}</span>/<span class="counts">{{item.user_num}}</span></p>
              </cell>
          </group>
        </div>
        <div v-transfer-dom>
          <popup v-model="isShow" position="right" @on-hide="hidePopup()">
            <div class="chooseBox">
              <div class="box_title">条件筛选</div>
              <div class="box_classify">
                <div class="box_time">
                  <!--<div class="classify_name">走访时间</div>-->
                  <div class="classify_date">
                    <checker v-model="selectedDate" default-item-class="normal_date" selected-item-class="selected_date">
                      <checker-item :value="item" v-for="(item, index) in dateClass" :key="index">{{item.value}}</checker-item>
                    </checker>
                    <group>
                      <datetime v-model="startDate" title="开始日期" clear-text="今天" @on-clear="setToday"></datetime>
                    </group>
                    <group class="endDate">
                      <datetime v-model="endDate" title="结束日期"></datetime>
                    </group>
                  </div>
                </div>
                <div class="box_name">
                  <!--<div class="classify_name">支部名称</div>-->
                  <div class="classify_search" style="margin-bottom: 2.8rem; margin-top: 2.8rem;">
                    <group>
                      <selector v-model="selectedData" :value-map="['id', 'department']" :options="ajaxData" placeholder="全部支部"></selector>
                    </group>
                    <!-- <model-list-select :list="ajaxData"
                             option-value="id"
                             option-text="department"
                             v-model="selectedData"
                             placeholder="全部"
                             @searchchange="searchData">
                    </model-list-select> -->
                  </div>
                </div>
              </div>
              <div class="box_button">
                <x-button type="primary" @click.native="choosedData">确定</x-button>
              </div>
            </div>
          </popup>
        </div>
    </div>
</template>

<script>
import {
  TransferDom,
  Group,
  Cell,
  Popup,
  Checker,
  CheckerItem,
  Datetime,
  Selector,
  XButton
} from "vux";
import VScroll from "../../pull-refresh";
// import { ModelListSelect } from "vue-search-select";
import { mapState, mapGetters } from "vuex";
export default {
  directives: {
    TransferDom
  },
  components: {
    Group,
    Cell,
    Popup,
    Checker,
    CheckerItem,
    Datetime,
    Selector,
    // ModelListSelect,
    XButton,
    VScroll
  },
  computed: {
    ...mapGetters([
      "helpPopup",
      "helpsList",
      "helpsListTotal",
      "helpsBranch",
      "branchList",
      "helpsBranchSelect",
      "helpScrollTop"
    ])
  },
  created() {
    // if (this.$route.query.status === "dynamic") {
    //   this.$store.dispatch("getHelpsList");
    // } else if (this.$route.query.status === "statistics") {
    //   this.$store.dispatch("getHelpsBranch");
    //   this.$store.dispatch("getBranchList");
    // }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.query.status == "dynamic") {
        this.box = this.$el.querySelector("#helpId");
        this.box.addEventListener("scroll", this.handler, false);
      }
    });
  },
  activated() {
    if (this.$route.query.status === "dynamic") {
      this.$store.dispatch("getHelpsList");
    } else if (this.$route.query.status === "statistics") {
      this.$store.dispatch("getHelpsBranch", {
        time: this.selectedDate.key,
        start: this.startDate,
        end: this.endDate
      });
      this.$store.dispatch("getBranchList");
    }
    this.$nextTick(() => {
      if (this.$route.query.status == "dynamic") {
        this.box = this.$el.querySelector("#helpId");
        this.box.scrollTop = this.helpScrollTop;
      }
    });
  },
  beforeDestroy() {
    this.box && this.box.removeEventListener("scroll", this.handler, false);
  },
  data() {
    return {
      page: 1,
      num: 10,
      scrollData: {
        noFlag: false //暂无更多数据显示
      },
      helps: [],
      branchs: [],
      isShow: false,
      selectedDate: { key: 1, value: "本月" },
      dateClass: [
        {
          key: 1,
          value: "本月"
        },
        {
          key: 2,
          value: "本季度"
        },
        {
          key: 3,
          value: "本年"
        }
      ],
      startDate: "",
      endDate: "",
      ajaxData: [],
      selectedData: "",
      searchText: ""
    };
  },
  watch: {
    helpPopup: function(val) {
      this.isShow = val;
    },
    startDate: function(val) {
      if (val) {
        this.selectedDate = {};
      }
    },
    endDate: function(val) {
      if (val) {
        this.selectedDate = {};
      }
    },
    selectedDate: function(val) {
      if (Object.keys(val).length) {
        this.startDate = "";
        this.endDate = "";
      }
    },
    helpsList: function(val) {
      this.helps = val;
    },
    helpsBranch: function(val) {
      this.branchs = val;
    },
    branchList: function(val) {
      this.ajaxData = val;
    },
    // helps: function(val) {
    //   if (
    //     this.helpsListTotal <= this.num ||
    //     val.length >= this.helpsListTotal
    //   ) {
    //     this.scrollData.noFlag = true;
    //   } else {
    //     this.scrollData.noFlag = false;
    //   }
    // },
    page: function(val) {
      let total = Math.ceil(this.helpsListTotal / this.num);
      if (val > total) {
        this.scrollData.noFlag = true;
      }
    },
    $route(to, from) {
      if (to.query.status === "dynamic" && to.path == "/home/help") {
        if (this.helpsList.length == 0) {
          this.$store.dispatch("getHelpsList");
        }
        this.$nextTick(() => {
          this.box.scrollTop = this.helpScrollTop;
        });
      } else if (to.query.status === "statistics" && to.path == "/home/help") {
        this.$store.dispatch("getHelpsBranch");
        this.$store.dispatch("getBranchList");
        this.box && this.box.removeEventListener("scroll", this.handler, false);
      }
    },
    helpsBranchSelect(val) {
      this.branchs = val;
    }
  },
  methods: {
    handler() {
      if (this.$route.query.status == "dynamic") {
        this.box = document.querySelector("#helpId");
        this.$store.dispatch("updateHelpPosition", this.box.scrollTop);
      }
    },
    refresh(done) {
      this.$store.dispatch("getHelpsList");
      this.page = 1;
      done();
    },
    infinite(done) {
      this.page++;
      let end = this.num * this.page;
      let i = end - this.num;
      let more = this.$el.querySelector(".load-more");
      this.$store.dispatch("getHelpsList", { page: this.page }).then(() => {
        for (i; i < end; i++) {
          if (i >= this.helpsListTotal) {
            more.style.display = "none"; //隐藏加载条
            // this.scrollData.noFlag = true;
            break;
          } else {
            more.style.display = "none"; //隐藏加载条
          }
        }
      });
      done();
    },
    hidePopup() {
      this.$store.dispatch("updateHelpPopup", {
        helpPopup: false
      });
    },
    setToday(value) {
      let now = new Date();
      let cmonth = now.getMonth() + 1;
      let day = now.getDate();
      if (cmonth < 10) cmonth = "0" + cmonth;
      if (day < 10) day = "0" + day;
      this.startDate = now.getFullYear() + "-" + cmonth + "-" + day;
    },
    searchData() {
      this.searchText = searchText;
    },
    choosedData() {
      if (!this.selectedDate && !this.startDate && !this.endDate) {
        this.$vux.toast.text("请选择时间", "middle");
      } else if (this.startDate && !this.endDate) {
        this.$vux.toast.text("请选择结束时间", "middle");
      } else if (!this.startDate && this.endDate) {
        this.$vux.toast.text("请选择开始时间", "middle");
      } else {
        this.$store.dispatch("updateHelpPopup", {
          helpPopup: false
        });

        this.$store.dispatch("getHelpBranchSelect", {
          time: this.selectedDate.key,
          start: this.startDate,
          end: this.endDate,
          department_id: this.selectedData
        });

        if (Object.keys(this.selectedDate).length) {
          window.sessionStorage.removeItem("help_start");
          window.sessionStorage.removeItem("help_end");
          window.sessionStorage.setItem("help_time", this.selectedDate.key);
        } else if (this.startDate && this.endDate) {
          window.sessionStorage.removeItem("help_time");
          window.sessionStorage.setItem("help_start", this.startDate);
          window.sessionStorage.setItem("help_end", this.endDate);
        }
      }
    }
  }
};
</script>

<style lang="less">
.help {
  width: 100%;
  height: 100%;
  padding: 2.75rem 0 0;
  font-size: 0;
  background: rgb(245, 245, 249);
  position: relative;
  .yo-scroll {
    top: 2.75rem;
  }
  .lesson_lists {
    padding: 0.75rem 0 0;
    .weui-cells {
      margin: 0;
    }
    .list {
      width: 100%;
    }
    .vux-cell-primary {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .vux-label {
      font-size: 1.125rem;
    }
    .vux-label-desc {
      font-size: 0.8125rem;
      color: rgb(102, 102, 102);
    }
  }
  .branch_lists {
    padding: 0.5rem 0 0;
    .weui-cells {
      margin: 0;
    }
    .weui-cell {
      padding: 0.75rem 1.125rem 0.75rem 0.8125rem;
    }
    .vux-cell-primary {
      text-align: left;
    }
    .vux-label {
      font-size: 1.125rem;
    }
    .weui-cell__ft {
      font-size: 1rem;
      color: rgb(214, 60, 50);
      padding-right: 1rem;
      .counts {
        font-size: 0.6875rem;
      }
    }
    .weui-cell_icon {
      display: block;
      width: 1.6875rem;
      margin-right: 0.375rem;
    }
  }
}
</style>
